import React, { useReducer } from "react";

//函数逻辑 preState是上一次的值  action是 dispatch传过来的type值 根据type做对应的操作
const handle = (preState, action) => {
  console.log(preState, action);
  //建议不要直接修改状态 先克隆一份
  //要返回一个值
  let cloneObj = { ...preState };
  switch (action.type) {
    case "reduce":
      cloneObj.count--;
      return cloneObj;
    case "add":
      cloneObj.count++;
      return cloneObj;
    default:
      return cloneObj;
  }
};
//状态
const initState = {
  count: 0,
};
export default function App() {
  // 第一个参数是状态 第二个修改状态的方法
  // useReducer第一个参数是函数,第二个是初始值 ,均定义在外部
  const [state, dispatch] = useReducer(handle, initState);
  return (
    <div>
      <button
        onClick={() => {
          dispatch({
            type: "reduce", //type是固定写法 值可以自己取
          });
        }}
      >
        减少
      </button>
      {state.count}
      <button
        onClick={() => {
          dispatch({
            type: "add",
          });
        }}
      >
        增加
      </button>
    </div>
  );
}
